/*
 * @Author: 雷小天 
 * @Date: 2021-10-13 15:12:10 
 * @Last Modified by: 雷小天
 * @Last Modified time: 2021-12-31 17:15:38
 */

<template>
  <div class="layui-container">
    <div class="layui-row layui-col-space15">
        <!-- 左边主体部分 -->
        <div class="layui-col-md8 content detail">
            <div class="fly-panel detail-box">
                <h1>{{title}}</h1>
                <div class="fly-detail-info">
                    <!-- <span class="layui-badge">审核中</span> -->
                    <span class="layui-badge layui-bg-green fly-detail-column">{{data.category_name}}</span>&nbsp;
                    <span v-if="data.solved ===1 " class="layui-badge" style="background-color: #5FB878;">已结</span> &nbsp;
                    <span v-else class="layui-badge" style="background-color: #999;">未结</span>&nbsp;

                    <span v-if="data.is_top ===1 " class="layui-badge layui-bg-black">置顶</span>&nbsp;

                    <span v-if="data.is_wonderful ===1 " class="layui-badge layui-bg-red">精帖</span>

                    <span class="fly-list-nums">
                        <a href="#comment"><i class="iconfont" title="回答">&#xe60c;</i> {{comment.total}}</a><i class="iconfont" title="人气">&#xe60b;</i> {{data.view_count}}
                    </span>
                </div>
                <div class="detail-about">
                    <a class="fly-avatar" :href="'/user/'+data.author">
                        <img :src="data.user_info.head_img" :alt="data.user_info.author_name">
                    </a>
                    <div class="fly-detail-user">
                        <a :href="'/user/'+data.author" class="fly-link">
                            <cite>{{data.user_info.author_name}}</cite>&nbsp;
                            <i v-if="data.user_info.is_admin ===1 " class="iconfont icon-renzheng" title="认证信息：管理员"></i>
                            <i v-if="data.user_info.is_vip" class="layui-badge fly-badge-vip">VIP{{data.user_info.is_vip}}</i>
                        </a>
                        <span>{{data.create_date}}</span>
                    </div>
                    <div class="detail-hits" id="LAY_jieAdmin" data-id="123">
                        <span style="padding-right: 10px; color: #FF7200">悬赏：{{data.reward}}飞吻</span>
                        <span v-if="data.user_info.is_admin ===1 " class="layui-btn layui-btn-xs jie-admin" type="edit"><a href="/post/update/{{.data.ID}}">编辑此贴</a></span>
                        <span class="layui-btn layui-btn-xs jie-admin" type="collect" data-type="add" @click="collect(1)">收藏</span>
                    </div>
                </div>
                <div class="detail-body layui-text photos">
                  <div v-html="data.content"></div>
                  <!-- <pre >{{data.content}}</pre> -->
                </div>
            </div>

            <div class="fly-panel detail-box" id="flyReply">
                <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                    <legend>回帖</legend>
                </fieldset>

                <ul class="jieda" id="jieda">
                    <template v-if="comment.rows">
                    <li v-for="(item) in comment.rows" :key="item.id" data-id="111">
                        <a name="item-1111111111"></a>
                        <div class="detail-about detail-about-reply">
                            <a class="fly-avatar" href="user/{{item.ouid}}">
                                <img :src="item.head_img" :alt="item.nickname">
                            </a>
                            <div class="fly-detail-user">
                                <a href="" class="fly-link">
                                    <cite>{{item.nickname}}</cite>
                                    <i v-if="item.is_admin ==='1'" class="iconfont icon-renzheng" title="认证信息：管理员"></i>
                                    <i v-if="item.is_vip != '0'" class="layui-badge fly-badge-vip">VIP{{item.is_vip}}</i>
                                </a>
                            </div>
                            <div class="detail-hits">
                                <span>{{item.create_date}}</span>
                            </div>
                        </div>
                        <div class="detail-body jieda-body photos">{{item.content}}</div>
                        <div class="jieda-reply">
                            <span class="jieda-zan" type="zan"><i class="iconfont icon-zan"></i><em>{{item.like}}</em></span>
                            <span type="reply"><i class="iconfont icon-svgmoban53"></i>回复</span>
                            <div class="jieda-admin">
                                <span type="edit">编辑</span>
                                <span type="del">删除</span>
                                <span class="jieda-accept" type="accept">采纳</span>
                            </div>
                        </div>
                    </li>
                    </template>
                    <li v-else class="fly-none">消灭零回复</li>
                   
                    <!-- 无数据时 -->
                    <!-- <li class="fly-none">消灭零回复</li> -->
                </ul>

                <div class="layui-form layui-form-pane">
                    <el-form ref="form" :model="form" label-width="120px">
                        <div class="layui-form-item layui-form-text">
                            <a name="comment"></a>
                            <div class="layui-input-block">
                                <textarea id="L_content" name="content" v-model="ruleForm.content" required lay-verify="required" placeholder="请输入内容"  class="layui-textarea fly-editor" style="height: 150px;"></textarea>
                            </div>
                        </div>
                        <!-- <div class="layui-form-item">
                            <input type="hidden" name="postid" :value="data.id">
                            <button class="layui-btn" lay-filter="*" @click="onSubmit" lay-submit>提交回复</button>
                        </div> -->
                        <el-form-item style="margin-left:-120px;">
                          <el-button type="primary" @click="onSubmit">提交回复</el-button>
                          <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </div>
        </div>
         <!-- 左边主体部分 -->
         <Right />
    </div>
</div>
</template>

<script>
import Right from '../components/Right.vue'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import Cookies from 'js-cookie'
export default {
   components: {
    Right,
  },
  data() {
    return {
      id: 0, //ID
      title: "", //标题
      address: "bbs.100txy.com", //地址
      data: {
        user_info: {}
      }, //帖子详情
      // comment: [], // 帖子评论列表,
      ruleForm: {
          ouid: 0,
          content: '',
          postid: 0,
      },
      comment:{
        total: 0,
        rows:[]
      }
    };
  },
  mounted(){
    console.log(this.$route)
    console.log("id:",this.$route.params.id)
    this.getDetail(this.$route.params.id) //获取帖子详情
  },
  setup(){
    console.log("setup start")
    myFn()
    function myFn(){
      console.log("aaa");
    }
    return {
      myFn
    }
  },
  methods: {
    //获取帖子详情
    getDetail(id) {
      const params = {
        params: {
        }
      }
      request.get('/micro-bbs/v1/post/'+id, params).then((res) => {
        const { code, data } = res
        // this.notifySucceed(message);
        if (code === 200) {
          this.title = data.title
          this.data = data.data
          this.data.content = this.escContent(data.data.content)
          this.comment = data.comment
          this.ruleForm.postid = data.id
          this.ruleForm.ouid = data.data.author
          //请求评论
          this.getComments(id)
        }
      })
    },
    //转义内容
    escContent(content){
      //支持的html标签
      var html = function(end){
        return new RegExp('\\n*\\['+ (end||'') +'(pre|hr|div|span|p|table|thead|th|tbody|tr|td|ul|li|ol|li|dl|dt|dd|h2|h3|h4|h5)([\\s\\S]*?)\\]\\n*', 'g');
      };
      content = this.escape(content||'') //XSS
      .replace(/img\[([^\s]+?)\]/g, function(img){  //转义图片
        return '<img src="' + img.replace(/(^img\[)|(\]$)/g, '') + '">';
      }).replace(/@(\S+)(\s+?|$)/g, '@<a href="javascript:;" class="fly-aite">$1</a>$2') //转义@
      .replace(/face\[([^\s[]]+?)\]/g, function(face){  //转义表情
        var alt = face.replace(/^face/g, '');
        return '<img alt="'+ alt +'" title="'+ alt +'" src="' + this.face[alt] + '">';
      }).replace(/a\([\s\S]+?\)\[[\s\S]*?\]/g, function(str){ //转义链接
        var href = (str.match(/a\(([\s\S]+?)\)\[/)||[])[1];
        var text = (str.match(/\)\[([\s\S]*?)\]/)||[])[1];
        if(!href) return str;
        var rel =  /^(http(s)*:\/\/)\b(?!(\w+\.)*(sentsin.com|layui.com))\b/.test(href.replace(/\s/g, ''));
        return '<a href="'+ href +'" target="_blank"'+ (rel ? ' rel="nofollow"' : '') +'>'+ (text||href) +'</a>';
      }).replace(html(), '<$1 $2>').replace(html('/'), '</$1>') //转移HTML代码
      .replace(/\n/g, '<br>') //转义换行
      return content;
    }

    ,escape: function(html){
      return String(html||'').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&amp;')
      .replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;');
    }

    ,face: function(){
      return {"[微笑]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_thumb.gif","[嘻嘻]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_thumb.gif","[哈哈]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6a/laugh.gif","[可爱]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/14/tza_thumb.gif","[可怜]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/kl_thumb.gif","[挖鼻]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/wabi_thumb.gif","[吃惊]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f4/cj_thumb.gif","[害羞]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/shamea_thumb.gif","[挤眼]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c3/zy_thumb.gif","[闭嘴]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/29/bz_thumb.gif","[鄙视]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/71/bs2_thumb.gif","[爱你]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/lovea_thumb.gif","[泪]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9d/sada_thumb.gif","[偷笑]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_thumb.gif","[亲亲]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8f/qq_thumb.gif","[生病]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/sb_thumb.gif","[太开心]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/58/mb_thumb.gif","[白眼]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/landeln_thumb.gif","[右哼哼]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/98/yhh_thumb.gif","[左哼哼]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/zhh_thumb.gif","[嘘]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a6/x_thumb.gif","[衰]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/cry.gif","[委屈]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/73/wq_thumb.gif","[吐]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9e/t_thumb.gif","[哈欠]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/cc/haqianv2_thumb.gif","[抱抱]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/27/bba_thumb.gif","[怒]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/7c/angrya_thumb.gif","[疑问]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/yw_thumb.gif","[馋嘴]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a5/cza_thumb.gif","[拜拜]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/70/88_thumb.gif","[思考]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/e9/sk_thumb.gif","[汗]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/24/sweata_thumb.gif","[困]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/kunv2_thumb.gif","[睡]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/96/huangliansj_thumb.gif","[钱]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/90/money_thumb.gif","[失望]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0c/sw_thumb.gif","[酷]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/cool_thumb.gif","[色]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/20/huanglianse_thumb.gif","[哼]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/49/hatea_thumb.gif","[鼓掌]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/36/gza_thumb.gif","[晕]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/dizzya_thumb.gif","[悲伤]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/1a/bs_thumb.gif","[抓狂]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/62/crazya_thumb.gif","[黑线]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/91/h_thumb.gif","[阴险]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/yx_thumb.gif","[怒骂]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/60/numav2_thumb.gif","[互粉]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/89/hufen_thumb.gif","[心]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/hearta_thumb.gif","[伤心]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/ea/unheart.gif","[猪头]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/58/pig.gif","[熊猫]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/panda_thumb.gif","[兔子]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/81/rabbit_thumb.gif","[ok]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d6/ok_thumb.gif","[耶]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/ye_thumb.gif","[good]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d8/good_thumb.gif","[NO]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/ae/buyao_org.gif","[赞]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d0/z2_thumb.gif","[来]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/come_thumb.gif","[弱]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d8/sad_thumb.gif","[草泥马]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/7a/shenshou_thumb.gif","[神马]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/60/horse2_thumb.gif","[囧]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/15/j_thumb.gif","[浮云]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/bc/fuyun_thumb.gif","[给力]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/1e/geiliv2_thumb.gif","[围观]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f2/wg_thumb.gif","[威武]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/70/vw_thumb.gif","[奥特曼]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/bc/otm_thumb.gif","[礼物]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c4/liwu_thumb.gif","[钟]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d3/clock_thumb.gif","[话筒]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9f/huatongv2_thumb.gif","[蜡烛]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/lazhuv2_thumb.gif","[蛋糕]":"http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3a/cakev2_thumb.gif"}
  
    },
    //收藏取消收藏
    collect(){

    },
    onSubmit() {
      //判断用户是否登录
      if(Cookies.get('app.token') != ""){
        console.log("有token")
        this.addComment() //发布帖子
      }else{
        ElMessage({
              message: '发布评论请先登录!',
              type: 'error',
              offset: 200,
        })
      }
    },
    //提交评论
    addComment() {
      console.log("this.ruleForm:",this.ruleForm)
      const params = {
            comment: {
               "id": new Date().getTime(),
                "postId": this.ruleForm.postid,
                "content": this.ruleForm.content,
                "createTime": 0,
                "pid": 0,
                "ouid": this.$store.getters.getUser.id,
            }
      }
      let header = {
              headers: {
                // 'Authorization': 'Bearer 9aTELn0tO0yZhoJgN1oZRA',
                token: 'Bearer '+this.$store.getters.getTokeninfo.access_token,
                'Content-Type': 'text/plain',
              }
      }
      request.post('/grpc-gateway/v1/comment/add/comm', JSON.stringify(params), header).then((res) => {
        const { status_code, payload} = res
        if (status_code === 0) {
          console.log("payload:",payload)
          ElMessage({
              message: "恭喜你，发布成功！",
              type: 'success',
              offset: 200,
          })
          this.$router.push("/post/"+params.comment.postId)
        }else{
           ElMessage({
              message: res.description,
              type: 'error',
              offset: 200,
          })
        }
      })
      // this.$router.push("/post/43")
    },
    //获取评论
    getComments(postId) {
      const params = {
      }
      let header = {
              headers: {
                // 'Authorization': 'Bearer 9aTELn0tO0yZhoJgN1oZRA',
                token: 'Bearer '+this.$store.getters.getTokeninfo.access_token,
                'Content-Type': 'text/plain',
              }
      }
      request.post('/grpc-gateway/v1/comment/post/'+postId, JSON.stringify(params), header).then((res) => {
        const { status_code, payload} = res
        if (status_code === 0) {
          console.log("payload:",payload)
          ElMessage({
              message: "评论加载成功！",
              type: 'success',
              offset: 200,
          })
          this.comment.total = payload.total
          this.comment.rows = payload.rows
          this.$router.push("/post/"+postId)
        }else{
           ElMessage({
              message: res.description,
              type: 'error',
              offset: 200,
          })
        }
      })
    },
   
  }
}
</script>